<template>
  <div class="procurement-container">
    <h2 class="procurement-title">采购信息</h2>

    <div class="procurement-tabs">
      <span
        v-for="(tab, index) in tabs"
        :key="index"
        :class="['procurement-tab', { active: activeTab === index }]"
        @click="handleTabClick(index)"
      >
        {{ tab }}
      </span>
      <div class="more-link">
        <router-link to="/info-search">查看更多 ></router-link>
      </div>
    </div>

    <div class="procurement-list">
      <el-table :data="procurementData" style="width: 100%" :show-header="false">
        <el-table-column prop="title" min-width="400">
          <template #default="scope">
            <div class="project-title">{{ scope.row.title }}</div>
            <div class="project-meta">
              <span>公告类型: {{ scope.row.type }}</span>
              <span>区域: {{ scope.row.region }}</span>
              <span>采购人: {{ scope.row.purchaser }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="publishDate" width="180" align="right">
          <template #default="scope">
            <span>{{ scope.row.publishTime }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { bidList } from '@/api/bid';

const activeTab = ref(0)
const tabs = ref(['体育采购公告', '体育采购结果', '艺术类采购公告', '艺术类采购结果'])
const procurementData = ref([
  {
    title: '体育用品采购项目2023体育装备采购项目招标',
    budget: '2000万',
    method: '公开招标',
    openTime: '2023-12-14',
    agency: '开标人员',
    publishDate: '2024-12-14'
  },
  {
    title: '长期体育器材采购2023体育用品采购项目招标',
    budget: '1000万',
    method: '邀请招标',
    openTime: '2023-12-14',
    agency: '招标人',
    publishDate: '2024-12-14'
  },
  {
    title: '中山市体育局公共文化体育健康服务平台项目技术开发及采购项目',
    budget: '150万',
    method: '竞争性磋商',
    openTime: '2023-12-13',
    agency: '代理机构',
    publishDate: '2024-12-13'
  },
  {
    title: '大连文化旅游学院体育场塑胶跑道采购项目（二次）一标段公告',
    budget: '80万',
    method: '公开招标',
    openTime: '2024-12-13',
    agency: '开标人员',
    publishDate: '2024-12-13'
  },
  {
    title: '邓州市文化旅游体育局旅游宣传片采购项目-竞争性磋商公告',
    budget: '24万',
    method: '竞争性磋商',
    openTime: '2024-12-12',
    agency: '开标人员',
    publishDate: '2024-12-12'
  }
])
const handleTabClick = (index) => {
  activeTab.value = index;
  list(index + 1); // 将索引值+1作为pageNo
};

const list = async (pageNo = 1) => {
  try {
    const res = await bidList({ pageNo, pageSize: 10 });
    procurementData.value = res.records;
  } catch (error) {
    console.error('获取采购列表失败:', error);
  }
};

onMounted(() => {
  list();
});

</script>

<style scoped>
.procurement-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.procurement-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 24px;
  color: #333;
  position: relative;
}

.procurement-title::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background-color: #409eff;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.procurement-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
  position: relative;
}

.procurement-tab {
  padding: 10px 20px;
  cursor: pointer;
  position: relative;
  color: #333;
  font-size: 14px;
}

.procurement-tab.active {
  color: #409eff;
  font-weight: bold;
}

.procurement-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 20%;
  width: 60%;
  height: 2px;
  background-color: #409eff;
}

.more-link {
  position: absolute;
  right: 0;
  top: 10px;
}

.more-link a {
  color: #409eff;
  text-decoration: none;
  font-size: 14px;
}

.project-title {
  font-weight: bold;
  margin-bottom: 8px;
}

.project-meta {
  font-size: 12px;
  color: #666;
}

.project-meta span {
  margin-right: 15px;
}
</style>
